import {
  animate,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';

export const selected = trigger('selected', [
  state('*', style({ opacity: 1, transform: 'scale(1)' })),
  state(
    'void',
    style({ opacity: 0, transform: 'scale(0)' }),
  ),
  transition(':enter', animate('300ms ease-in-out')),
  transition(':leave', animate('200ms ease-in-out')),
]);

export const expand = trigger('expand', [
  state(
    'void',
    style({
      opacity: 0,
      translate: '0 -20px',
      height: '0px',
    }),
  ),
  state(
    '*',
    style({
      opacity: 1,
      translate: '0',
    }),
  ),
  transition(':enter', animate('300ms ease-in-out')),
  transition(':leave', animate('200ms ease-in-out')),
]);

export const menuOpen = trigger('menuOpen', [
  state(
    'void',
    style({
      opacity: 0,
      translate: '0 -10px',
    }),
  ),
  state(
    '*',
    style({
      opacity: 1,
      translate: '0',
    }),
  ),
  transition(':enter', animate('300ms ease-in-out')),
  transition(':leave', animate('200ms ease-in-out')),
]);
